<template>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</template>

<script setup></script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.container .item {
  border: 1px solid #f00;
}

.container .item:nth-child(1) {
  grid-column: 1 / 3;
}

.container .item:nth-child(2) {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
}
</style>
